<template>
	<view style="padding-bottom: 51px;border-bottom: 1px solid #3c3c3c;max-width: 780px;margin: auto;">
		<u-navbar :title="$t('index.xiangqing')" :autoBack="true" bgColor="#00141E" placeholder leftIconColor="#fff" :titleStyle="{color:'#fff'}">
			<template slot="right">
				<view class="navbar">
					<view class="n-i iconfont icon-donghua" v-if="info.flashUrl" :class="{active:activeIndex==1}" @click="playFn(1)"></view>
					<view class="n-i iconfont icon-w_dianshi-" v-if="info.streamUrl" :class="{active:activeIndex==2}" @click="playFn(2)"></view>
				</view>
			</template>
		</u-navbar>
		<view class="content" v-if="info">
			<view class="top">
				<view v-if="activeIndex==1">
					<!-- #ifdef H5 -->
					<web-view class="webview" :class="typeName=='zq'?'zu':'lan'" :src="info.flashUrl" :style="{top:statusBarHeight+44+'px'}"></web-view>
					<!-- #endif -->
				</view>
				<view class="t-info" :class="typeName=='zq'&&activeIndex==1?'zu':'lan'">
					<view class="t-title">{{info.leagueName}}</view>
					<view class="t-time">{{$u.timeFormat(info.gtime, 'mm/dd hh:MM')}}</view>
					<view class="t-center">
						<view class="t-c-left">
							<view style="position: relative;top: -10px;">
								<image v-if="info.homeLogo" class="image" :src="computImageUrl(info.homeLogo)"></image>
								<image v-else class="image" src="@/static/image/index/dui.png"></image>
							</view>
							<view style="position: relative;top: -8px;width: 180rpx;text-align: center;height: 40px;" class="lz-ellipsis-2">{{info.homeName}}</view>
						</view>
						<view class="t-c-center">
							<view style="color: #888;font-size: 13px;text-align: center;">FT</view>
							<view style="margin: 5px 0;">{{info.homeScore||0}} : {{info.awayScore||0}}</view>
							<view style="color: #888;font-size: 12px;text-align: center;margin-bottom: 10px;">HT {{info.homeHalfScore||0}} : {{info.awayHalfScore||0}}</view>
						</view>
						<view class="t-c-right">
							<view style="position: relative;top: -10px;">
								<image v-if="info.awayLogo" class="image" :src="computImageUrl(info.awayLogo)"></image>
								<image v-else class="image" src="@/static/image/index/dui.png"></image>
							</view>
							<view style="position: relative;top: -8px;width: 180rpx;text-align: center;height: 40px;" class="lz-ellipsis-2">{{info.awayName}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btns">
				<view class="btn" :class="{active:active==1}" @click="tabClick(1)">{{$t('index.saikuang')}}</view>
				<view class="btn" :class="{active:active==2}" @click="tabClick(2)">{{$t('index.zhenrong')}}</view>
				<view class="btn" :class="{active:active==3}" @click="tabClick(3)">{{$t('index.jiaofeng')}}</view>
				<view class="btn" :class="{active:active==4}" @click="tabClick(4)" v-if="info&&info.matchState!=-1" style="display: flex;align-items: center;">
					{{$t('index.yuce')}}
					<image src="@/static/image/yuce/huo.png" style="width: 20px;height: 20px;"></image>
				</view>
				<view class="btn" :class="{active:active==5}" @click="tabClick(5)">{{$t('index.shuju')}}</view>
			</view>
			<view style="width: 100%;" v-if="ad">
				<image :src="ad.image" style="width: 100%;height:60px;" @click="navigatorTo"></image>
			</view>
			<view class="btn">
				<!-- 概况 -->
				<template v-if="typeName=='zq'">
					<overview v-if="active==1&&info" :matchId="matchId"></overview>
				</template>
				<template v-if="typeName=='lq'">
					<overview-bk v-if="active==1&&info" :matchId="matchId" :homeData="info"></overview-bk>
				</template>
				<!-- 阵容 -->
				<template v-if="typeName=='zq'">
					<lineup v-if="active==2&&info" :matchId="matchId"></lineup>
				</template>
				<template v-if="typeName=='lq'">
					<lineup-bk v-if="active==2&&info" :matchId="matchId"></lineup-bk>
				</template>
				
				<!-- 交锋 -->
				<confrontation :homeData="info" v-if="active==3&&info" :matchId="matchId" :typeName="typeName"></confrontation>
				<!-- 预测 -->
				<prediction :homeData="info" v-if="active==4&&info" :matchId="matchId" :typeName="typeName"></prediction>
				
				<!-- 数据 -->
				<dataSheet :homeData="info" v-if="active==5&&info" :matchId="matchId" :typeName="typeName"></dataSheet>
			</view>
		</view>
		<!-- 下载 -->
		<!-- #ifdef H5 -->
		<u-popup :show="download.show" mode="bottom" round="14" @close="download.show=false">
			<view class="lzpopup">
				<image style="width: 50px;height: 50px;margin:10px auto;" src="@/static/image/index/h5Logo.png"></image>
				<view style="color: #fff;">OlaScore Is Better on our App</view>
				<view style="color: #b8b8b8;text-align: center;">Live score updates for all matches and free live streaming of matches</view>
				<view class="btns">
					<view class="btn1" @click="download.show=false">Not now</view>
					<view class="btn1 btn2" @click="downloadFn">Download</view>
				</view>
			</view>
		</u-popup>
		<!-- #endif-->
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import overviewBk from "./components/overview-bk.vue";
	import overview from "./components/overview.vue";
	import lineup from "./components/lineup.vue";
	import lineupBk from "./components/lineup-bk.vue";
	import confrontation from "./components/confrontation.vue";
	import prediction from "./components/prediction.vue";
	import dataSheet from "./components/dataSheet.vue";
	
	let wv,currentWebview
	export default {
		computed: {
			...mapGetters(['userInfo', 'api','config','userToken']),
			computImageUrl(){
				return (url)=>{
					if(url){
						let domain = url.split("/")
						domain = domain[0]+'//'+ domain[2]
						let finalUrl = url.replace(domain, "");
						let imageurl= getApp().globalData.AppConfig.cdnDomain + finalUrl
						return imageurl
					}
					
				}
			}
		},
		components:{
			overview,
			overviewBk,
			lineup,
			lineupBk,
			confrontation,
			dataSheet,
			prediction
		},
		data() {
			return {
				activeIndex:-1,
				row:'',
				info:{//详情
					flashUrl:''
				},
				active:1,
				typeName:'',
				matchId:'',
				statusBarHeight:0,
				ad:null,
				download:{
					show:false
				}
			}
		},
		onLoad(op) {
			this.typeName=op.typeName
			this.matchId=op.matchId
			if(this.typeName=='zq'){//足球
				//获取足球详情
				console.log('获取足球详情');
				this.getfootballInfo()
			}else if(this.typeName=='lq'){
				console.log('获取篮球详情');
				//获取篮球详情
				this.getbkdataInfo()
			}
			this.getQueryInfo()
			this.ad = getApp().globalData.AppConfig.adScoreDetail
		},
		onShow() {
			this.loading_Ad()
			this.loading_Ad_Video()
		},
		methods: {
			...mapActions(['loading_Ad','loading_Ad_Video']),
			//下载
			downloadFn(){
				window.location.href="https://img1.zhibo06.com/download/mixfootball.apk"
				this.download.show=false
			},
			navigatorTo(){
				if(this.ad.type=='1'){
					// #ifdef H5
					window.open(this.ad.link)
					// #endif
					// #ifdef APP-PLUS
					plus.runtime.openURL(this.ad.link)
					// #endif
				}else{
					uni.navigateTo({
						url: '/pages/webview/webview?src='+this.ad.link,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			playFn(index){
				if(this.activeIndex==index){
					this.activeIndex=-1
					// #ifdef APP-PLUS
					plus.webview.close('custom-webview',wv);
					// #endif
				}else{
					this.activeIndex=index
				}
				if(this.activeIndex==1){
					// #ifdef APP-PLUS
					let height = this.typeName=='zq'? uni.upx2px(470)+'px' :uni.upx2px(240)+'px'
					wv = plus.webview.create(this.info.flashUrl,"custom-webview",{
						plusrequire:"none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
						'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
						top:uni.getSystemInfoSync().statusBarHeight+44, 
						height:height,
						background: 'transparent'
					})
					currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
					currentWebview.append(wv);//一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
					// #endif
				}else if(this.activeIndex==2){
					//#ifdef H5
					this.download.show=true
					// #endif
					//#ifdef APP-PLUS
					
					uni.navigateTo({
						url: '/pages/videoPlay/videoPlay?src='+this.info.streamUrl,
						success: res => {
						},
						fail: () => {},
						complete: () => {}
					});
					// #endif
					
				}
			},
			getQueryInfo(){
				let sys = uni.getSystemInfoSync()
				this.statusBarHeight = sys.statusBarHeight
			},
			tabClick(index){
				
				// if(index==4&&!this.userToken){
				// 	uni.navigateTo({
				// 		url: '/pages/login/login',
				// 		success: res => {},
				// 		fail: () => {},
				// 		complete: () => {}
				// 	});
				// 	return
				// }
				this.active=index
			},
			//获取足球详情
			getfootballInfo(){
				uni.$u.http.get(this.api.api_v1_fbdata_matchInfo, {params:{matchId:this.matchId}}).then(res => {
					if(res.code==200){
						this.info=res.data
					}
				})
			},
			//获取篮球详情
			getbkdataInfo(){
				uni.$u.http.get(this.api.api_v1_bkdata_matchInfo, {params:{matchId:this.matchId}}).then(res => {
					if(res.code==200){
						this.info=res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@media screen and (min-width: 780px) {
		/deep/ .u-navbar--fixed{
			left: initial;right: inherit;width: 780px;
		}
		/deep/ .content .top{
			.webview{
				width: 780px!important;margin: 0 auto;height: 490px!important;
			}
			.zu{
				height:490px!important;
			}
			.lan{
				height: 240rpx!important;
			}
		} 
		
	}
	
	/deep/ .u-popup__content{
		background-color: #1b2a4d;
	}
	.lzpopup{
		display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 10px;line-height: 26px;
		.btns{
			display: flex;justify-content: space-around;width: 100%;margin: 10px 0;
			.btn1{
				border: 1px solid #fff;color: #fff;width:300rpx;height:35px;text-align: center;line-height: 35px;border-radius: 5px;
			}
			.btn2{
				background-color: #FF6B00;color: #000;border-color: transparent;
			}
		}
	}
	.navbar{
		display: flex;color: #fff;
		.n-i{
			padding: 4px 10px;font-size: 22px;
		}
		
		.active{
			background-color: #ffaf01;border-radius: 10px;
		}
	}
	.content {
		background-color: #00141E;
		.top{
			.webview{
				width: 100%;height: 100vh;
			}
			.zu{
				height:470rpx;
			}
			.lan{
				height: 240rpx;
			}
			.bu{
				height: initial;
			}
			.t-info{
				display: flex;flex-direction: column;justify-content: center;align-items: center;color: #b1b1b1;font-size: 13px;
				line-height: 20px;
				.t-center{
					display: flex;justify-content: space-around;width: 100%;align-items: center;color: #fff;
					.t-c-left,.t-c-right{
						flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;
						.image{
							width: 40px;height: 40px;
						}
					}
					.t-c-center{
						font-size: 26px;
					}
				}
			}
		}
		.btns{
			display: flex;justify-content: space-around;color: #cccccc;font-size: 14px;background-color: #001E28;
			.btn{
				padding: 10px;
			}
			.active{
				color: #ffaf01;border-bottom: 1px solid #ffaf01;
			}
		}
		
	}

	
</style>
